<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/Global2.css" />
    <link rel="stylesheet" href="css/style2.css" />
    <title>帮我找房</title>
    <style>
      body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
      }
      .submit-btn {
        width: 200px;
      }
      .form1 .item label {
        width: 140px;
        float: none;
        margin-top: 0;
      }
      .input,
      .form input[type="text"] {
        width: 200px;
      }
      #specialRequirement{display: flex;flex-flow: wrap;}
      #specialRequirement label {
        width: 110px;
      }
    </style>
  </head>

  <body>
      <div class="tc" style="padding:1rem 2rem;">
        <h2 class="f30 fw8 text-red">全城经纪人为您线上找房</h2>
        <p class="mb-10 f14">
          选择您希望买到什么样的房子。提交后，我们的房产经纪人会在24小时内联系您，给您推荐符合您购买意愿的房产。
        </p>
      </div>
    <div class="bg-grey">
      <div class="">
        <form action="" class="form form1" id="myform">
          <div class="item">
            <label>房屋套数</label>
            <div class="input">
              <select class="input g9" id="WhichTimeHomebuyer">
                <option value="首套" selected>首套</option>
                <option value="二手房">二手房</option>
              </select>
            </div>
          </div>
          <div class="item">
            <label>您的预算总价范围</label>
            <div class="dib">
              <input
                style="width: 90px"
                type="text"
                placeholder="最小值"
                id="Budget_low"
              />
              -
              <input
                style="width: 105px"
                type="text"
                placeholder="最大值"
                id="Budget_high"
              />
            </div>
            万
          </div>
          <div class="item">
            <label>您购买的偏好？</label>
            <div class="input">
              <select class="input w130 g9" id="Preference">
                <option selected>请选择购买偏好</option>
                <option value="二手房">二手房</option>
                <option value="新房">新房</option>
                <option value="不限">不限</option>
              </select>
            </div>
          </div>
          <div class="item">
            <label>您想买什么户型？</label>
            <div class="input">
              <select class="input w130 g9" id="HouseLayout">
                <option selected>请选择户型</option>
                <option value="1居">1居</option>
                <option value="2居">2居</option>
                <option value="3居">3居</option>
                <option value="4居">4居</option>
                <option value="5居">5居</option>
                <option value="5+居">5+居</option>
              </select>
            </div>
          </div>
          <div class="item">
            <label>区域</label>
            <div class="input mr-15">
              <select class="input w130 g9 area_list" id="District"></select>
            </div>
          </div>
          <div class="item">
            <label>您的联系方式</label>
            <input
              style="width: 211px"
              type="text"
              placeholder="请输入您的联系方式"
              id="phone"
            />
            <span class="alert">不能为空！</span>
          </div>
          <div class="item">
            <label>特殊要求</label>
            <div class="" id="specialRequirement">
              <label for="S1"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S1"
                  value="优质学区"
                  data-index="0"
                />优质学区</label
              >
              <label for="S2"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S2"
                  value="离地铁近"
                  data-index="1"
                />离地铁近</label
              >
              <label for="S3"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S3"
                  value="生活便利"
                  data-index="2"
                />生活便利</label
              >
              <label for="S4"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S4"
                  value="南北通透"
                  data-index="3"
                />南北通透</label
              >
              <label for="S5"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S5"
                  value="车位充足"
                  data-index="4"
                />车位充足</label
              >
              <label for="S6"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S6"
                  value="高楼层"
                  data-index="5"
                />高楼层</label
              >
              <label for="S7"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S7"
                  value="中间楼层"
                  data-index="6"
                />中间楼层</label
              >
              <label for="S8"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S8"
                  value="绿化率高"
                  data-index="7"
                />绿化率高</label
              >
              <label for="S9"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S9"
                  value="带电梯"
                  data-index="8"
                />带电梯</label
              >
              <label for="S10"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S10"
                  value="优质物业"
                  data-index="9"
                />优质物业</label
              >
              <label for="S11"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S11"
                  value="不要顶层"
                  data-index="10"
                />不要顶层</label
              >
              <label for="S12"
                ><input
                  type="checkbox"
                  name="requirement"
                  id="S12"
                  value="不要底层"
                  data-index="11"
                />不要底层</label
              >
            </div>
          </div>
          <div class="">
            <div class="f14 g6">
              温馨提示：提交购房需求后将由津房优秀的房产经纪人为您提供专业的服务。
            </div>
            <div class="f14 text-orange">
              现在提交找房需求，专享经纪人一对一帮您找房。
            </div>
          </div>
          <p class="w130 m-auto submit-btn">提交委托</p>
        </form>
      </div>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/request.js"></script>
    <script src="js/all.js"></script>
    <script>

      // var commomUrl = "https://rht-test.jfzh.com.cn/",
      var commomUrl = "https://rht.jfzh.com.cn/",
        info = JSON.parse(localStorage.getItem("userInfo")), //判断是否登录
        budget = null,
        district = null,
        houseLayout = null,
        preference = null,
        specialRequirement = [],
        whichTimeHomebuyer = null;

      // datas = {
      //     Budget: "1_100",
      //     District: "河西",
      //     HouseLayout: ["2"],
      //     OpenId: "o5GGA4i3Q0mHnWyeVQsVhSElOw7I",
      //     Preference: "二手房",
      //     SpecialRequirement: ["优质学区", "离地铁近", "生活便利"],
      //     WhichTimeHomebuyer: "首套"
      // }
      // datas.OpenId=$('#WhichTimeHomebuyer').val()
      // datas.phone=$('#phone').val()

      //基础数据
      Data = getBasicData();
      //初始化区域数据
      $(".area_list").html(addOption(Data.districtList));
      //判断未登录状态,禁用表单元素
      if (info) {
        $("select,input").attr("disabled", false);
      } else {
        $("select,input").attr("disabled", true);
      }
      //判断是否登录
      $(".form").click(function () {
        if (info) {
          $(".mask").hide();
        } else {
          $(".mask").show();
        }
      });

      $("#specialRequirement").on("click", "input:checkbox", function () {
        if ($(this).prop("checked")) {
          specialRequirement.push($(this).attr("value"));
        } else {
          specialRequirement.splice($(this).data("index"), 1);
        }
      });
      //提交表单数据
      $(".submit-btn").click(function () {
        var datas = {};
        Budget = budget =
          $("#Budget_low").val() + "_" + $("#Budget_high").val();
        District = district = $("#District").val();
        HouseLayout = houseLayout = $("#HouseLayout").val();
        Preference = preference = $("#Preference").val();
        SpecialRequirement = specialRequirement;
        WhichTimeHomebuyer = whichTimeHomebuyer = $(
          "#WhichTimeHomebuyer"
        ).val();

        if (!info) {
          $(".mask").show();
        } else if (!parseInt(budget)) {
          alert("请输入您的预算范围");
        } else if (preference == "请选择购买偏好") {
          alert("请选择购房偏好");
        } else if (houseLayout == "请选择户型") {
          alert("请选择户型");
        } else if (district == "不限") {
          alert("请选择区域");
        } else {
          $(".mask").hide();
          datas = {
            Budget: Budget,
            District: District,
            HouseLayout: HouseLayout,
            Preference: Preference,
            SpecialRequirement: SpecialRequirement,
            WhichTimeHomebuyer: WhichTimeHomebuyer,
            OpenId: info.customerOpenId,
          };
          submitHelpMeToFindHouseInfo(datas);
        }
      });

      //获取基础数据
      function getBasicData() {
        var result = null;
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: commomUrl + "BasicDataApi/GetBasicData",
          cache: false,
          dataType: "json",
          async: false,
          success: function (data) {
            // console.log(data.data)
            if (data.code == 200) {
              result = data.data;
            }
          },
        });
        return result;
      }

      function addOption(obj) {
        var html = "<option selected>不限</option>";
        $.each(obj, function (index, val) {
          html += "<option value=" + val.name + ">" + val.name + "</option>";
        });
        return html;
      }

      //表单数据提交
      function submitHelpMeToFindHouseInfo(datas) {
        $.ajax({
          contentType: "application/json",
          type: "post",
          url: commomUrl + "HelpMeToFindHouse/SubmitHelpMeToFindHouseInfo",
          cache: false,
          data: JSON.stringify(datas), //重点必须为一个变量如：data
          dataType: "json",
          async: false,
          success: function (data) {
            console.log(data);
            if (data.code == 200) {
              //跳转到房源搜索列表
              alert("提交成功");
              document.getElementById("myform").reset();
            }
          },
        });
      }
    </script>
  </body>
</html>
